<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<html>
<head>
    <style type="text/css">
        html, body {
            margin: 0;
            height: 100%;
        }
    </style>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
        function initialize() {
            var latlng = new google.maps.LatLng(39.907, 116.387);
            var myOptions = { zoom: 12, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP};
            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            var coordinates = [
                <c:forEach items="${list}" var="item" varStatus="index">
                new google.maps.LatLng(${item.lng}, ${item.lat})${index.count==fn:length(list)?'':','}
                </c:forEach>
            ];

            var polyline = new google.maps.Polyline({
                        path:coordinates ,
                        strokeColor: "#ff0000",
                        strokeWeight:2
                    });

            var image = 'images/box.gif';
            var myLatLng = new google.maps.LatLng(39.907, 116.387);
            var beachMarker = new google.maps.Marker({       position: myLatLng,       map: map,       icon: image   });

            polyline.setMap(map);
        }

    </script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>